<template>
  <div class="echarts_box">
    <div class="echarts_box" ref="echarts_box" :style="{ opacity: data.length == 0 ? '0' : '1' }"></div>
    <!---------------------- 无数据是显示 ---------------------->
    <Nodata class="Nodata" v-show="data.length == 0"></Nodata>
  </div>
</template>


<script>
import { mapState, mapActions, mapGetters } from "vuex";
import fontSize from "@/modules/fontSize";
export default {
  props: {
    legendData: {
      // 返回的数据
      type: Array | Object,
      default: function () {
        return [];
      },
    },
    //单位
    unit: {
      type: String,
      default: "",
    },
    //Y单位
    yUnit: {
      type: String,
      default: "箱",
    },
    //柱子宽度
    barWidth: {
      type: String,
      default: "12",
    },
    //距离左边位置
    gridLeft: {
      type: String,
      default: "5%",
    },
    //距离右边位置
    gridRight: {
      type: String,
      default: "5%",
    },
    //是否显示Legend
    isLegend: {
      type: Boolean,
      default: false,
    },
    ySplitLineShow: {
      type: Boolean,
      default: false,
    },
    yAxisLineShow: {
      type: Boolean,
      default: false,
    },
    //是否显示单位
    isUnit: {
      type: Boolean,
      default: true,
    },
    //是否显示
    xAxisLineShow: {
      type: Boolean,
      default: false,
    },
    //是否显示顶部数字
    isCategory: {
      type: Boolean,
      default: true,
    },
    //柱状图颜色
    bar1Color: {
      type: String,
      default: "rgba(59,255,230,0.8)",
    },
    data: {
      // 返回的数据
      type: Array | Object,
      default: function () {
        return [];
      },
    },
  },
  computed: {},
  watch: {
    legendData: "drawLine", // 数值变化是更新图表
    barWidth: "drawLine", // 数值变化是更新图表
    isCategory: "drawLine", // 数值变化是更新图表
    yAxisLineShow: "drawLine", // 数值变化是更新图表
    ySplitLineShow: "drawLine", // 数值变化是更新图表
    xAxisLineShow: "drawLine", // 数值变化是更新图表
    gridLeft: "drawLine", // 数值变化是更新图表
    gridRight: "drawLine", // 数值变化是更新图表
    yUnit: "drawLine", // 数值变化是更新图表
    bar1Color: "drawLine", // 数值变化是更新图表
    data: "drawLine", // 数值变化是更新图表
  },
  data() {
    return {
      temp: 0,
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      try {
        this.$nextTick(() => {
          this.temp = 0;
          var _this = this;
          let categoryArray = [];
          var myChart = _this.$echarts.init(_this.$refs.echarts_box);
          var category = [];
          var barData1 = [235, 643, 864, 853, 896, 233, 862];
          var barData2 = [235, 754, 532, 653, 964, 235, 432];
          var lineData1 = [235, 643, 864, 853, 896, 233, 862];
          var lineData2 = [235, 754, 532, 653, 964, 235, 432];
          var barData3 = [];
          for (let index in barData1) {
            barData3.push(barData1[index] + barData2[index]);
            let categoryArr = [];
            categoryArr.push(barData1[index], barData2[index]);
            categoryArray.push(categoryArr);
          }

          for (let index in barData1) {
            category.push(Number(index) + 1 + "号");
          }
          var rateData = [];
          // for (var i = 0; i < 33; i++) {
          //   // var date = i+2001;
          //   // category.push(date)
          //   var rate = barData1[i] / barData2[i];
          //   rateData[i] = rate.toFixed(2);
          // }

          // option
          let option = {
            // backgroundColor: "#191E40",
            tooltip: {
              trigger: "axis",
              backgroundColor: "rgba(7, 52, 75,0.8)",
              axisPointer: {
                type: "shadow",
                // label: {
                //   show: true,
                //   backgroundColor: "rgba(7, 52, 75,0.8)",
                // },
              },
            },
            legend: {
              padding: [10, 30, 10, 40], //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
              borderColor: "rgba(85, 150, 188,0.5)", //边框颜色
              borderWidth: 1, //边框线宽
              data: ["生产用电", "生活用电", "水消耗"],
              top: "2%",
              left: "center",
              icon: "roundRect",
              itemWidth: 20,
              itemHeight: 6,
              textStyle: {
                color: "#fff",
                padding: [0, 0, 0, 6],
                fontSize: fontSize.fontSize(0.084),
              },
            },
            grid: {
              height: "50%",
              // x: "12%",
              // width: "82%",
              // y: "12%",
              top: "36%",
            },
            xAxis: [
              {
                data: category,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "rgba(7,219,255,0.2)",
                    // type: "dashed",
                  },
                },
                axisLabel: {
                  textStyle: {
                    color: "#d4f0ff",
                    fontSize: fontSize.fontSize(0.082),
                    padding: [0, 6, 0, 0],
                  },
                },
                axisTick: {
                  show: false,
                },
              },
              {
                type: "category",
                // padding:[20,0,0,0],
                offset: -20,
                axisLine: { show: false },
                axisTick: { show: false },
                axisLabel: {
                  show: true,
                  textStyle: {
                    fontSize: fontSize.fontSize(0.082),
                    color: "#2BDDF1",
                    // padding: [20, 0, 0, 0],
                  },
                  formatter: (value, index) => {
                    let arr = value.split(",");
                    let abc = ["a", "b", "c", "d", "e"];
                    let substr = "";
                    for (let index = 0; index < 2; index++) {
                      let sub =
                        "{" + abc[index] + "|" + arr[index] + this.unit + "}\n";
                      substr += sub;
                    }
                    // return ` {a|${arr[0]}%}\n{b|${arr[1]}%}`;
                    return substr;
                  },
                  rich: {
                    a: {
                      color: "rgba(59,255,230,1)",
                      padding: [2, 5, 4, 5],
                      align: "center",
                      fontSize: fontSize.fontSize(0.082),
                      fontWeight: 600,
                      width: 30,
                      borderRadius: [5, 5, 0, 0],
                      backgroundColor: "rgba(6,49,71,0.6)",
                    },
                    b: {
                      color: "rgba(248,255,59,1)",
                      align: "center",
                      fontSize: fontSize.fontSize(0.082),
                      padding: [2, 5, 2, 5],
                      fontWeight: 600,
                      width: 30,
                      borderRadius: [0, 0, 5, 5],
                      backgroundColor: "rgba(6,49,71,0.6)",
                    },
                  },
                },
                data: categoryArray,
                splitArea: { show: false },
                splitLine: { show: false },
                // data: [250, 250 ,250, 250, 250],
              },
            ],
            yAxis: [
              {
                splitLine: { show: false },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "rgba(7,219,255,0.2)",
                    // type: "dashed",
                  },
                },
                axisLabel: {
                  textStyle: {
                    color: "#d4f0ff",
                    fontSize: fontSize.fontSize(0.082),
                    padding: [0, 6, 0, 0],
                  },
                },
                // axisLabel: {
                //   formatter: "{value} ",
                // },
                axisTick: {
                  show: false,
                },
              },
              {
                splitLine: { show: false },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "rgba(7,219,255,0.2)",
                    // type: "dashed",
                  },
                },
                // axisLabel: {
                //   formatter: "{value} ",
                // },
                axisLabel: {
                  textStyle: {
                    color: "#d4f0ff",
                    fontSize: fontSize.fontSize(0.082),
                    padding: [0, 6, 0, 0],
                  },
                },
                axisTick: {
                  show: false,
                },
              },
            ],

            series: [
              {
                name: "贯通率",
                type: "line",
                smooth: true,
                symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
                showAllSymbol: true,
                // symbol: "emptyCircle",
                symbolSize: 8,
                yAxisIndex: 1,
                itemStyle: {
                  normal: {
                    color: "#FF3BD8",
                    shadowBlur: 20,
                    shadowColor: "#FF3BD8",
                  },
                },
                zlevel: 4,
                data: lineData1,
              },

              {
                name: "已贯通",
                type: "bar",
                stack: "total",
                barWidth: 22,
                itemStyle: {
                  normal: {
                    barBorderRadius: 0,
                    color: new _this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        { offset: 0, color: "rgba(59,255,230,0.8)" },
                        { offset: 1, color: "rgba(59,255,230,0.8)" },
                      ]
                    ),

                    shadowBlur: 20,
                    shadowColor: "rgba(59,255,230,0.8)",
                  },
                },

                shadowBlur: 10,
                shadowColor: "rgba(59,255,230,0.8)",
                data: barData1,
              },

              {
                name: "计划贯通",
                type: "bar",
                barGap: "-100%",
                stack: "total",
                emphasis: {
                  focus: "series",
                },
                barWidth: 22,
                itemStyle: {
                  normal: {
                    barBorderRadius: 0,
                    color: new _this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        { offset: 0, color: "rgba(248,255,59,0.8)" },
                        { offset: 1, color: "rgba(248,255,59,0.8)" },
                      ]
                    ),
                    shadowBlur: 20,
                    shadowColor: "rgba(248,255,59,0.8)",
                  },
                },
                z: -12,
                data: barData2,
              },
              {
                // 分隔
                type: "pictorialBar",
                name: "总和",
                itemStyle: {
                  normal: {
                    color: "rgba(9, 59, 118, 0.9)",
                  },
                },
                symbolRepeat: "fixed",
                symbolMargin: 3,
                symbol: "rect",
                symbolClip: true,
                symbolSize: [22, 4],
                symbolPosition: "start",
                symbolOffset: [0, 0],
                // data: [126, 85, 78, 35, 90],
                width: 2,
                z: 0,
                zlevel: 3,
                data: barData3,
              },
            ],
            dataset: {
              source: this.data,
            },
          };
          myChart.setOption(option);
          myChart.off("click");
          /* 点击事件 */
          myChart.on("click", (params) => {});
          /* 大小自适应 */
          window.addEventListener("resize", function () {
            myChart.resize();
          });
          myChart.resize();
        });
      } catch (e) {
        console.log(e);
        // 错误处理代码片段
      }
    },
  },
};
</script>


<style lang="scss" scoped>
.echarts_box {
  width: 100%;
  height: 100%;
  position: relative;
  .Nodata {
    position: absolute;
    top: 0;
    z-index: 10;
  }
}
</style>